<template>
  <div class="app-container" style="padding-top: 10px">
    <el-row style="font-size: 18px;margin-bottom:10px;">Welcome {{ userName + '(' + roles + ')' }}</el-row>
    <el-row :gutter="30">
      <el-col v-for="(name, index) in returnList" :key="index" style="width: 20%">
        <el-card :body-style="{ padding: '20px 20px 0' }">
          <el-row><span class="title-span-class">{{ titleList[index] }}</span></el-row>
          <el-row><span class="desc-span-class">{{ descList[index] }}</span></el-row>
          <el-row class="tag-row-class">
            <!-- <el-link @click="onTagClick(index)"> -->
            <span class="tag-span-class">{{ tags[name] }}</span>
            <!-- </el-link> -->
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getHomeTag } from '@/api/home'
export default {
  name: 'MainIndex',
  data() {
    return {
      tags: '',
      userName: '',
      roles: '',
      titleList: ['Created', 'Completed', 'In Progress', 'Overdue', 'Notification'],
      descList: ['By Month', 'By Month', 'By Month', 'By Month', 'Open'],
      returnList: ['created_by_month', 'completed_by_month', 'in_progress_by_month', 'overdue_by_month', 'notification']
    }
  },
  created() {
    this.getHomeTag()
  },
  methods: {
    async getHomeTag() {
      this.userName = this.$store.getters.name
      const roles_info = this.$store.getters.roles_info
      this.roles = roles_info.map(role => role.name).join(',')
      await getHomeTag().then(async result => {
        if (result.is_hotel_user === 1) {
          this.titleList.splice(-2) // 当是酒店用户的时候不显示Overdue 和 Notification
          this.descList.splice(-2)
          this.returnList.splice(-2)
        }
        this.tags = result
      })
    },
    onTagClick(value) {
      if (value < 4) {
        this.$router.push({ path: '/order/index' })
      } else {
        this.$router.push({ path: '/notification/index' })
      }
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.title-span-class {
  font-size: 20px;
  font-weight: bold;
}
.desc-span-class {
  font-size: 20px;
  color: #909399
}
.tag-row-class {
  text-align: right;
  color: #97a8be
}
.tag-span-class {
  font-size: 80px;
}
</style>
